<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>hello world</p>
        <div id="shadow"></div>
    </div>
    <script>
        class SnapshotSandbox {
            constructor(){
                this.proxy = window; // window属性
                this.modifyPropsMap = {}; // 记录在window上的修改
                this.active();
            }
            //  应用上次快照 还原
            active(){
                this.windowSnapshot = {}; // 进行拍照
                for (const prop in this.proxy) {
                    if (Object.hasOwnProperty.call(this.proxy, prop)) {
                        this.windowSnapshot[prop] = this.proxy[prop];
                    }
                }
                Object.keys(this.modifyPropsMap).forEach(p=>{
                    this.proxy[p] = this.modifyPropsMap[p];
                })
            }
            // 计入本次更改，应用上次快照 并更新快照
            inactive(){
                for (const prop in this.proxy) {
                    if (Object.hasOwnProperty.call(this.proxy, prop)) {
                        if(this.proxy[prop] !== this.windowSnapshot[prop]){
                            this.modifyPropsMap[prop] = this.proxy[prop];
                            this.proxy[prop] = this.windowSnapshot[prop];
                        }
                        
                    }
                }
            }

        }

        let sandbox = new SnapshotSandbox();
        ((
            (window)=>{
                window.a = 1;
                window.b = 2;
                console.log(window.a,window.b);
                sandbox.inactive();
                console.log(window.a,window.b);
                sandbox.active();
                console.log(window.a,window.b);
            }

        ))(sandbox.proxy);
    </script>
</body>
</html>